<?php defined('IN_IA') or exit('Access Denied');?><?php (!empty($this) && $this instanceof WeModuleSite) ? (include $this->template('_headerv2', TEMPLATE_INCLUDEPATH)) : (include template('_headerv2', TEMPLATE_INCLUDEPATH));?>


<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    html {
        background: #f0f1f5;
    }

    .title {
        height: 50px;
        text-align: center;
        font-size: 16px;
        line-height: 50px;
        border-bottom: 1px solid #ddd;
        background: #fff;
    }

    .itemTitle {
        font-size: 16px;
    }

    .itemTitle span {
        font-size: 12px;
    }

    .package .on .itemTitle {
        background: url('<?php echo MODULE_URL;?>template/mobile/images/check.png') right center no-repeat;
        background-size: 15px 15px;
    }

    .package {
        background: #fff;
        margin-bottom: 15px;
    }

    .package > div {
        padding: 10px 15px;
        border-bottom: 1px solid #ddd;
    }

    .package > div .itemTitle {
        margin-bottom: 10px;
        background: url('<?php echo MODULE_URL;?>template/mobile/images/uncheck.png') right center no-repeat;
        background-size: 15px 15px;
    }

    .package ul li {
        line-height: 34px;
        height: 34px;
        font-size: 14px;
        color: #666;
        padding-left: 20px;
        position: relative;
    }

    .package ul li::after {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #0097fa;
        position: absolute;
        left: 10px;
        top: 50%;
        margin-top: -2.5px;
    }

    .package > div .second {
        margin-bottom: 0;
    }

    .payment {
        background: #fff;
    }

    .payment li {
        height: 40px;
        line-height: 40px;
        padding: 0 15px 0 40px;
        border-bottom: 1px solid #ddd;
    }

    .payment .pay {
        height: 50px;
        line-height: 50px;
        text-indent: 20px;
        border-bottom: 1px solid #ddd;
    }

    .payment ul li.on div {
        background: url('<?php echo MODULE_URL;?>template/mobile/images/check.png') right center no-repeat;
        background-size: 15px 15px;
    }

    .payment ul li div {
        background: url('<?php echo MODULE_URL;?>template/mobile/images/uncheck.png') right center no-repeat;
        background-size: 15px 15px;
    }

    .wechat {
        background: url('<?php echo MODULE_URL;?>template/mobile/images/wechat.png') 15px center no-repeat;
        background-size: 20px 20px;
    }

    .count {
        background: url('<?php echo MODULE_URL;?>template/mobile/images/count.png') 15px center no-repeat;
        background-size: 20px 20px;
    }

    .enSurePay {
        width: 90%;
        height: 50px;
        border-radius: 5px;
        background: #0097fa;
        color: #fff;
        text-align: center;
        line-height: 50px;
        margin: 20px auto;
    }
</style>
</head>
<body>
<div class="title">
    确认订单
</div>
<section class="package">

    <?php  if(is_array($level_list)) { foreach($level_list as $index => $vip) { ?>

    <div class="<?php  if($index == 0) { ?> on <?php  } ?>">
        <?php  if($index == 0) { ?>
            <input type="hidden" id="first_price" value="<?php  echo $vip['level_price'];?>">
            <input type="hidden" id="first_oid" value="<?php  echo $vip['id'];?>">
            <input type="hidden" id="first_href" value="<?php  echo $this->createMobileUrl('vip', array('op'=>'buyvip', 'level_id'=>$vip['id']));?>">
        <?php  } ?>

        <div class="itemTitle" onclick="selectPrice(<?php  echo $vip['level_price'];?>,<?php  echo $vip['id'];?>,'<?php  echo $this->createMobileUrl('vip', array('op'=>'buyvip', 'level_id'=>$vip['id']));?>');">
            <?php  echo $vip['level_name'];?><span><?php  echo $vip['level_price'];?>/<?php  echo $vip['level_validity'];?>天</span>
        </div>
        <?php  if($vip['id'] == 3) { ?>
            <ul>
                <li>
                    免费学习线上精品课件
                </li>
                <li>
                    直接推广VIP分享500元奖学金
                </li>
                <li>
                    原价3980/年，特惠1000元/年
                </li>
            </ul>
        <?php  } ?>
    </div>

    <?php  } } ?>


</section>
<section class="payment">
    <div class="pay">
        支付平台
    </div>
    <ul>
        <li class="wechat on">
            <div>微信支付</div>
        </li>
        <!-- <li class="count"><div>账户余额</div></li> -->
    </ul>
</section>
<div class="enSurePay">
    确认支付￥<span id="btn-price"> </span>
</div>

<script>
    var price = 0;
    var oid = 0;
    var _href;

    function _init() {
        price =  $("#first_price").val();
        oid =    $("#first_oid").val();
        _href =    $("#first_href").val();
        document.getElementById("btn-price").innerHTML = price;
    }
    _init();
    function selectPrice(Price, Oid,url) {
        price = Price;
        oid = Oid;
        _href = url;
        console.log(_href);
        if (price <= 0 || oid <= 0) {
            alert('价格信息错误，请刷新重试;');
            return;
        }

        document.getElementById("btn-price").innerHTML = price.toFixed(2);
    }

    $(".package>div").click(function () {
        var index = $(this).index()
        console.log(index)
        $(this).addClass('on').siblings().removeClass('on')
    })
    $(".payment li").click(function () {
        var index = $(this).index()
        console.log(index)
        $(this).addClass('on').siblings().removeClass('on')
    })
    $(".enSurePay").click(function () {
       location.href = _href;
    })
</script>

<?php (!empty($this) && $this instanceof WeModuleSite) ? (include $this->template('_footerv2', TEMPLATE_INCLUDEPATH)) : (include template('_footerv2', TEMPLATE_INCLUDEPATH));?>